<template>
	<view class="page">
		<view class="tab">
			<view class="item" :class="{ actived: tabIndex == i }" v-for="(item, i) in tab" :key="item.name"
				@click="change(i)">
				<div class="title">{{ item.name }}</div>
				<view class="gap" v-if="tabIndex == i"></view>
			</view>
		</view>

		<view class="manuscript">
			<view class="manuscript-container" v-if="filedata">
				<image class="manuscript-img" :src="filedata" mode="aspectFill"></image>
				<image src="@/static/images/icon_shanchu@2x.png" class="delete" @click="getImg2Img">
				</image>
			</view>
			<view class="btn" v-if="!filedata">
				<image class="btn-icon" src="@/static/images/icon_xiangaotu@2x.png"></image>
				<text class="btn-text">点击上传线稿图</text>
				<uv-upload name="0" :maxCount="1" width="686rpx" height="142rpx" @afterRead="afterFiledata">
				</uv-upload>
			</view>
		</view>

		<view class="model">
			<view class="title"></view>
			<navigator url="" class="more">点击选择更多模型风格</navigator>
			<div class="list">
				<uv-grid :border="false">
					<uv-grid-item v-for="(item,index) in 6" :key="index">
						{{index}}
					</uv-grid-item>
				</uv-grid>
			</div>
		</view>

	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	import {
		apiGetImg2Img
	} from '@/api/defaultApi.js'



	//  tab
	const tab = [{
		name: '快速绘图'
	}, {
		name: '局部重绘'
	}]
	// 登录方式
	const tabIndex = ref(0)

	// 上传的图片
	const filedata = ref('') //线稿图
	const filedata1 = ref('') //添加风格彩色参考图
	const filedata2 = ref('') //场景通道图



	// 切换方式
	const change = (i) => {
		if (i == 1) {
			uni.showModal({
				title: '提示',
				content: '局部重绘功能暂未开放！',
				showCancel: false
			})
			return
		}
		tabIndex.value = i
	}



	// 上传线稿图
	const afterFiledata = async (event) => {
		filedata.value = event.file.url
	}

	//删除线稿图
	const deleteFileImg = (event) => {
		filedata.value = ''
	}


	const getImg2Img = async () => {
		let parasm = {
			"picBatch": 1,
			"prompt": "一个公园景观,蜿蜒的柏油路,成熟的树木,浅色石墙。竹林,住宅楼。堆积的灰色岩石,阴沉的天空, 绿草地。汽车。传统的东亚建筑结构。墙壁上堆放着浅色石块。黑色木门。黑瓦屋顶。 茂密的竹林。棕色的木牌。 浅色石阶。 水泥路面。石墙的特写。墙壁由米色、灰色和棕色的切割石块堆叠而成。灌木。黑瓦屋顶。绿树。灰色石花瓶。这是傍晚的水景。温暖的光芒。小溪倒映着周围的岩石和树木。环境照明。树木茂密。茅草屋，有斜屋顶。 浅色石墙。一个风景园林。瀑布在崎岖的岩石之间倾泻而下。小池塘。一棵松树。 黑瓦屋顶的传统建筑。不规则形状的灰色石桌。小溪两岸绿树成荫。黑天鹅。小屋。 这座黑色的传统建筑拥有黑色的拱形屋顶、玻璃窗和带有黑色水平木栏杆的阳台。岩石。一座传统的石桥。溪水环绕，岩石环绕。高大的松树。竹林。竹篱笆。茅草屋顶的亭子。 深色木梁。 修剪整齐的灌木丛。 一棵树干扭曲的树。藤蔓。传统风格园林的夜景。小路都是用反光的石头铺成的。 建筑物的照明窗户覆盖着竹百叶窗。 黑色的柱子。黑色柱子支撑的编织屏风。现代建筑灯火通明。灰色的岩石。 一条走道。黑色金属天花板由黑色木梁支撑。粗糙的轻质石墙。天然石材地板。有干树枝的黑色花瓶。",
			"negative_prompt": "",
			"preProcessor": "1730434219784876033",
			"control_weight": 1.1,
			"loraWeight": 0.8,
			"picRate": "1024*576",
			"control_mode": "偏预处理",
			"picSize": "",
			"style": "1766373818822373377"
		}
		// let res = await apiGetImg2Img({})
		let formData = new FormData();
		formData.append("name", filedata.value);
		formData.append("paramStr", JSON.stringify(parasm));
		let res = await apiGetImg2Img(formData)
	}
</script>

<style lang="scss" scoped>
	.tab {
		width: 100%;
		display: flex;
		justify-content: space-around;
		margin: 8rpx auto 40rpx;

		.item {
			color: #fff;
			display: flex;
			flex-direction: column;
			align-items: center;

			&.actived {
				color: #FFCB30;
			}

			.title {
				height: 28rpx;
				line-height: 28rpx;
				font-size: 30rpx;
				margin-bottom: 16rpx;
			}

			.gap {
				height: 8rpx;
				background: #ffcb30;
				border-radius: 4rpx;
				width: 88rpx;
			}
		}
	}

	.manuscript {
		.manuscript-container {
			width: 100%;
			height: 386rpx;
			background: #ececec;
			border-radius: 20rpx;
			overflow: hidden;
			position: relative;

			.manuscript-img {
				width: 100%;
				height: 100%;
			}

			.delete {
				width: 48rpx;
				height: 48rpx;
				position: absolute;
				right: 24rpx;
				bottom: 24rpx;
			}
		}

		.btn {
			width: 100%;
			height: 142rpx;
			background: linear-gradient(65deg, #ff8a63 0%, #ffde7d 100%), #3bac72;
			border-radius: 20rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;
			overflow: hidden;

			.btn-icon {
				width: 40rpx;
				height: 30rpx;
				margin-right: 10rpx;
			}

			.uv-upload {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
			}
		}
	}

	.model {
		width: 100%;
		height: 480rpx;
		background: #191919;
		border-radius: 20rpx;
		margin: 20rpx auto;
		overflow: hidden;
	}
</style>